import React from 'react'
import { connect } from 'react-redux'
import {
  ListItem,
  ListInfo
} from '../style'
import * as actionCreators from '../store/actionCreators'

class List extends React.Component {
  componentDidMount () {
    const { fetchData } = this.props
    console.log('mounted')
    fetchData()
  }

  render () {
    const {
      list
    } = this.props
    return (
          list.map(article => {
            return (
              <ListItem key={ article.get('id') }>
                <img src={ article.get('imgUrl') } alt=" "/>
                <ListInfo>
                  <h3 className='title'>{ article.get('title') }</h3>
                  <p className='desc'>{ article.get('desc') }</p>
                </ListInfo>
              </ListItem>
            )
          })
    )
  }
}

const mapState = state => ({
  list: state.getIn(['home', 'articleList'])
})

const mapDispatch = (dispatch) => ({
  fetchData () {
    dispatch(actionCreators.fetchArticle())
  }
})

export default connect(mapState, mapDispatch)(List)
